<!DOCTYPE html>
<html>
<head>
  <title>Rebound JS</title>
  <link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono|Roboto:400,300,700" rel="stylesheet" type="text/css">

  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="stylesheet" type="text/css" href="./src/cascadeEffect/main.css" />
  <link rel="stylesheet" type="text/css" href="./src/photoScale/main.css" />
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">

  <script defer type="text/javascript" src="../dist/rebound.js"></script>
  <script defer type="text/javascript" src="./dist/cascadeEffect.js"></script>
  <script defer type="text/javascript" src="./dist/hamburgerButton.js"></script>
  <script defer type="text/javascript" src="./dist/photoScale.js"></script>
</head>
<body>
  <div class="container">
    <div class="pageHeader">
      <div class="reboundIcon"></div>
      <h1 class="pageTitle">Rebound JS Examples</h1>
      <div class="mainDescription">
        A gallery of examples demonstrating the types of animations you can build
        with <a href="http://www.github.com/facebook/rebound-js" target="_blank">rebound-js</a>.
      </div>
    </div>

    <!-- Cascade Effect -->
    <div class="exampleHeader">
      <h2 class="exampleTitle">Cascade Effect</h2>
      <div class="exampleDescription">
        This example demonstrates a cascade effect generated from a single spring curve.
        A spring is pre-recorded using the SimulationLooper. Each frame of the spring is
        played back over a set of frame handlers where each handler trails the next by one
        frame. When all of the handlers have played all the frames, the animation is over.
        (<a href="https://github.com/facebook/rebound-js/blob/master/examples/cascadeEffect/main.js" target="_blank">Code</a>)
      </div>
    </div>
    <div id="cascadeEffectExample" class="exampleContainer">
    </div>


    <!-- Hamburger Menu -->
    <div class="exampleHeader">
      <h2 class="exampleTitle">Hamburger Button Example</h2>
      <div class="exampleDescription">
        This example demonstrates an animation similar to the one found in Facebook
        Paper for transitioning a hamburger button into a close button. The animation
        timing is run on a Rebound spring and each frame of the animation is interpolated
        from a zero to one spring transition and drawn in canvas. Tap/Click on buttons
        to transition between the states. (<a href="https://github.com/facebook/rebound-js/blob/master/examples/hamburgerButton/main.js" target="_blank">Code</a>)
      </div>
    </div>
    <div id="hamburgerButtonExample" class="exampleContainer">
    </div>

    <!-- Photo Scaler -->
    <div class="exampleHeader">
      <h2 class="exampleTitle">Photo Scale Animation</h2>
      <div class="exampleDescription">
        This example demonstrates scaling a photo on a Rebound spring animation. You can adjust the
        tension and friction using the sliders and observe how this changes the curve of the spring
        animation. The tension and friction values are based on
        <a href="http://facebook.github.io/origami/">Origami</a>, so you can convert Origami mockups
        directly into Rebound animations. (<a href="https://github.com/facebook/rebound-js/blob/master/examples/photoScale/main.js" target="_blank">Code</a>)
      </div>
    </div>
    <div class="exampleContainer">
      <div class="inner-content">
        <canvas id="graph-canvas" width="600" height="600"></canvas>
        <div id="example-photo" class="photo" onmousedown="this.className='photo down'">
          <div class="pill">Press and Hold</div>
        </div>
      </div>
      <div class="controls">
        <div>
          <label for="tension">tension : <span id="tension_value">40</span></label>
          <input type="range" id="tension" name="tension" min="1" max="100" value="40" />
        </div>
        <div>
          <label for="friction">friction : <span id="friction_value">3</span></label>
          <input type="range" id="friction" name="friction" min="1" max="30" value="3" />
        </div>
      </div>
    </div>

    <script>
    (function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  (i[r] =
    i[r] ||
    function() {
      (i[r].q = i[r].q || []).push(arguments);
    }),
    (i[r].l = 1 * new Date());
  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m);
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-53476169-1', 'auto');
ga('send', 'pageview');
</script>
  </body>
  </html>
